<template>
    <div class="header">
        <span @click="toggle">
            <el-icon-expand v-if="collapse" style="margin-right: 10px;"></el-icon-expand>
            <el-icon-fold v-else></el-icon-fold>
        </span>
    </div>
</template>

<script lang="ts" setup  name="NavHeader">
// vue 3.4 优化了需要定义propDefine和emit事件的麻烦
const collapse = defineModel("collapse")

const toggle = () => {
    collapse.value = !collapse.value
}

</script>


<style scoped lang="scss">

.header{
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

</style>